<template>
  <div>
    <div id="divPlugin" style="width: 900px; height: 500px"></div>
    <el-button @click="login">登录</el-button>
    <el-button @click="handlePort">获取可用通道</el-button>
    <el-button @click="see">预览</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      szIP: "192.168.0.64", //IP地址
      iPrototocol: 1,
      iPort: "80", //端口号
      szUserName: "admin", //用户名
      szPassword: "Scxn2010", //管理员密码,
      ids: [],
    };
  },

  methods: {
    login() {
      console.log("I'm   login");
      WebVideoCtrl.I_Login(
        this.szIP,
        this.iPrototocol,
        this.iPort,
        this.szUserName,
        this.szPassword,
        {
          success: function (xmlDoc) {
            console.log("登录成功");
            console.log(xmlDoc, "xmlDoc");
          },
          error: function (err) {
            console.log(err, "登录失败");
          },
        }
      );
    },
    handlePort() {
      let that = this;
      console.log("this", this);
      console.log("that", that);
      const szDeviceIdentify = this.szIP + "_" + this.iPort;

      // 模拟通道
      WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
        success: function (xmlDoc) {
          let oChannels = $(xmlDoc).find("VideoInputChannel");
          $.each(oChannels, function (i) {
            let id = $(this).find("id").eq(0).text(),
              name = $(this).find("name").eq(0).text();
            if ("" == name) {
              name = "Camera " + (i < 9 ? "0" + (i + 1) : i + 1);
            }
            console.log(typeof that.ids, "id");
            that.ids.push(id);
          });

          console.log(" 获取模拟通道成功！");
        },
        error: function (oError) {
          console.log(" 获取模拟通道失败！", oError);
        },
      });
    },
    see() {
      console.log("33333333");

      WebVideoCtrl.I_StartRealPlay(this.szIP + "_" + this.iPort, {
        // iWndIndex: 1,
        iChannelID: this.ids[0], // 如果播放通道号给错了，浏览器会报代码为1000的错误
        success: () => {
          console.log("预览成功");
        },
      });
    },
    init() {
      console.log(";2222222");

      WebVideoCtrl.I_InitPlugin({
        iWndowType: 1,
        bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
        cbInitPluginComplete: function () {
          WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(
            () => {
              // 检查插件是否最新
              WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
                if (bFlag) {
                  console.log(
                    "152检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！"
                  );
                }
              });
            },
            () => {
              console.log(
                "152插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！"
              );
            }
          );
        },
      });
    },
  },

  created() {},
  mounted() {
    console.log("1111111");

    this.init();
  },
};
</script>

<style></style>
